<template>
	<view class="infolist">
		<!-- 标题区域 -->
		<view class="title-box">
			<text class="title-icon" :class="iconclass"></text>
			<text class="title-content">{{title}}</text>
		</view>
		<!-- 列表区域 -->
		<view class="infoListArea">
			<!-- 当列表的长度不超过5时，底部不显示，数据全部显示 -->
			<!-- 当列表长度大于5时，底部显示，且只显示index<5的那六个 -->
			<view 
				v-for="(item ,index) in infolist" 
				:key="index" 
				@click="chooseItem(item)"
				class="info-box"
				v-show="index<5 || openAll"
				>
					<text :class="item.infoIconClass" class="info-icon"></text>
					<text class="info-content">{{item.content}}</text>
					<text class="info-button">{{item.buttonName}}</text>
			</view>
			<!-- 底部的标签按钮 -->
			<view 
				class="show-ctrl" 
				v-if="infolist.length>5" 
				@click="openAll=!openAll"
				>
					<i v-if="openAll" class="cuIcon-fold openlist"></i>
					<i v-else class="cuIcon-unfold openlist"></i>
					{{openAll?'收起':'展开全部'}}
			</view>
		</view>
		
	</view>
	
	
</template>

<script>
	export default{
		name:'infoList',
		props:{
			title:{
				require:true,
				default:'传入title值'
			},
			iconclass:{
				default:''
			},
			infolist:{
				require:true,
				default:()=>[{
						infoIconClass:'cuIcon-ticket',
						content:'黄沙（如约）',
						buttonName:'去预定'
						}]
			}
		},
		data(){
			return{
				openAll:false
			}
		},
		 mounted() {
		     
		},
		methods:{
			//点击进入详情页
			chooseItem(item){
				let url = '../detail/detail' + "?" + 'id=' + item.id
				uni.navigateTo({
					url: url
				})
			}
		}
		
	}
</script>

<style scoped lang="stylus">
	/* 标题容器 */
	.title-box
		background-color: #ffffff;
		color: #666666;
		padding-left: 20rpx;
		font-size: 30rpx;
		min-height 100rpx
		display flex
		align-items center
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		box-sizing border-box
		.title-icon
			font-size: 36rpx;
			color: #E6482E;
		.title-content
			font-weight: bold;
			font-size: 36rpx;
			margin-left 5rpx
	// 列表信息内容
	.infoListArea
		display: block;
		overflow: hidden;
		.info-box
			box-sizing border-box
			display flex
			align-items center
			padding 0 30rpx
			height 100rpx
			.info-icon
				color: #f37b1d;
				font-size: 36rpx;
				margin 0 15rpx
			.info-content
				font-size: 28rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: rgba(13, 13, 13, 1);
				flex-grow 1
				margin-left 10rpx
				font-family: -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
			.info-button
				font-size: 24rpx;
				padding: 8rpx 28rpx;
				background-image: linear-gradient(45deg, rgb(240, 129, 111), #ed1c24);
				color: #ffffff;
				box-sizing: border-box;
				border-radius 50rpx
		.show-ctrl
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #D85A32;
			.openlist
				margin-right 10rpx
</style>
